<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="margin-bottom: 10px">
      <h3>此测试需要在web环境下进行</h3>
    </div>
    <div id="demo"></div>
    <script src="../index.browser.js"></script>
    <script>
      const demo = document.getElementById('demo');

      (async () => {
        const size = 1024 * 1024 * 2;
        const detailed = false; //
        const testOptions = [
          {
            img: 'test-10.4MB.jpg',
            option: {
              //   detailed,
              size,
              accuracy: 0.99,
            },
          },
          {
            img: 'test-2.45MB.png',
            option: {
              //   detailed,
              size,
            },
          },
          {
            img: 'test-11.1MB.jpg',
            option: {
              //   detailed,
              size,
            },
          },
          {
            img: 'test-6.05MB.jpg',
            option: {
              //   detailed,
              size,
            },
          },
          {
            img: 'test-2.81MB.jpg',
            option: {
              //   detailed,
              size,
            },
          },
          {
            img: 'test-5.01MB.jpg',
            option: {
              //   detailed,
              size,
            },
          },
          {
            img: 'test-1.52MB.jpg',
            option: {
              //   detailed,
              size,
            },
          },
        ];
        for (let item of testOptions) {
          const raw = await fetch(item.img).then(r => r.blob());
          const option = item.option;
          const div = document.createElement('div');
          div.innerHTML = `<p>以下是原图：</p>
          <p><img src="./${item.img}" style="width: 300px" /></p>
          <p>图片名称:${item.img}</p> 
          <p>原始格式:</p>
          <p>${raw.type}</p>
          <p>压缩前：</p>
          <p>${(raw.size / 1024).toFixed(2)} KB</p>
          <p>压缩后：</p>`;
          const img = document.createElement('img');
          img.style.width = '300px';
          demo.appendChild(div);
          const blob = await compressImage(item.img, option);
          let blobUrl = URL.createObjectURL(blob);
          img.src = blobUrl;
          div.appendChild(img);
          let p = document.createElement('p');
          p.innerText = `压缩后图片大小：${(blob.size / 1024).toFixed(2)} KB`;
          div.appendChild(p);
          div.appendChild(document.createElement('hr'));
        }
      })();
    </script>
  </body>
</html>
